<!-- 59 组件-->
<template>
	<div  class="page-wrap">
		<a-space class="common-button-group">
			<a-button
      class="t9-form-wideget-btn-default"
				type="primary"
				:loading="searchBtnLoading"
				@click="handleSearch"
				>{{ $t('common_query') }}</a-button
			>
		</a-space>
		<t-query-form
			layout="inline"
			group="tabFutureHold"
			ref="queryForm"
			:rules="rules"
			:model="queryForm"
		>
        <a-form-item :label="$t('T9_shopId')" name="shopId">
				<a-select
					v-model:value="queryForm.shopId"
					:placeholder="$t('common_pleaseSelect')"
          allow-clear
					class="t9-form-wideget-input-default"
				>
					<a-select-option
						v-for="item in options.shopIdList"
						:key="item.value"
						:value="item.value"
						>{{ item.label }}</a-select-option
					>
				</a-select>
			</a-form-item>
        <a-form-item :label="$t('T9_cstId')" name="cstId">
				<a-input
					v-model:value="queryForm.cstId"
					allow-clear
					class="t9-form-wideget-input-default"
					:placeholder="$t('common_pleaseEnter1')"
				/>
			</a-form-item>
		</t-query-form>
		<a-row
			type="flex"
			justify="space-between"
			align="middle"
			class="global-oper-row mt-1"
		>
			<a-col :span="15" class="global-oper-row-title">{{
				$t('T9_cstInfo')
			}}</a-col>
			<a-col :span="8" class="global-oper-row-extra">
				<a-button class="t9-form-wideget-btn-default" type="primary">{{ $t('T9_toExcel') }}</a-button>
			</a-col>
		</a-row>
		<t-table align="center" :loading="searchBtnLoading" max-height="100%" :data="list.tableData">
			<t-column min-width="100" field="cstId" :title="$t('T9_cstId')" />
			<t-column min-width="100" field="bayId" :title="$t('T9_bayId')" />
			<t-column min-width="100" field="productType" :title="$t('T9_productType')" />
			<t-column min-width="100" field="productId" :title="$t('T9_productId')" />
			<t-column min-width="100" field="route" :title="$t('T9_route')" />
			<t-column min-width="100" field="opeartion" :title="$t('T9_opeartion')" />
			<t-column min-width="100" field="state" :title="$t('T9_state')" />
			<t-column min-width="100" field="processState" :title="$t('T9_processState')" />
			<t-column min-width="100" field="holdState" :title="$t('T9_holdState')" />
			<t-column min-width="100" field="reworkState" :title="$t('T9_reworkState')" />
			<t-column min-width="100" field="grade" :title="$t('T9_grade')" />
			<t-column min-width="100" field="glassQty" :title="$t('T9_glassQty')" />
			<t-column min-width="100" field="eqpId" :title="$t('T9_eqpId')" />
		</t-table>
      <div style="display: flex; justify-content: space-between;  margin-bottom: 20px; width: 100%; height:100%">
        <div style="width: 30%;height:100%">
          <a-row
			type="flex"
			justify="space-between"
			align="middle"
			class="global-oper-row mt-1"
		>
			<a-col :span="4" class="global-oper-row-title">{{
				$t('T9_glassList')
			}}</a-col>
      <a-col :sapn="5">
        <a-checkbox  v-model:checked="selectByAbs">{{$t('T9_selectByAbs')}}</a-checkbox>
      </a-col>
			<a-col :span="14" class="global-oper-row-extra">
				<a-button class="t9-form-wideget-btn-default" type="primary">{{ $t('T9_toExcel') }}</a-button>
			</a-col>
		</a-row>
    <div class="page-wrap-table" style="height: 100%">
		<t-table align="center" :loading="searchBtnLoading" max-height="100%" :data="list.glassList">
      <t-column type="checkBox" width="50" @check-change="handleCheckChange"></t-column>
			<t-column min-width="100" field="slot" :title="$t('T9_slot')" />
			<t-column min-width="100" field="glassId" :title="$t('T9_glassId')" />
			<t-column min-width="100" field="shopId" :title="$t('T9_shopId')" />
			<t-column min-width="100" field="productId" :title="$t('T9_productId')" />
			<t-column min-width="100" field="cstId" :title="$t('T9_cstId')" />
			<t-column min-width="100" field="route" :title="$t('T9_route')" />
			<t-column min-width="100" field="operation" :title="$t('T9_operation')" />
			<t-column min-width="100" field="processState" :title="$t('T9_processState')" />
			<t-column min-width="100" field="glassHoldState" :title="$t('T9_glassHoldState')" />
			<t-column min-width="100" field="abnormalCode" :title="$t('T9_abnormalCode')" />
			<t-column min-width="100" field="glassGrade" :title="$t('T9_glassGrade')" />
			<t-column min-width="100" field="owner" :title="$t('T9_owner')" />
			<t-column min-width="100" field="panelGrades" :title="$t('T9_panelGrades')" />
		</t-table>
    </div>
        </div>
        <div style="width: 20%; height: 100%">
          <div style="width: 100%; height: 50%">
            <a-row
			type="flex"
			justify="space-between"
			align="middle"
			class="global-oper-row mt-1"
		>
			<a-col :span="12" class="global-oper-row-title">{{
				$t('T9_operationList')
			}}</a-col>
			<a-col :span="12" class="global-oper-row-extra">
				<a-form
         ref="operationForm"
          layout="inline"
          :colon="false"
          :model="operationForm"
          :rules="rules3">
          <a-form-item  :label="$t('T9_route')" name="route">
            <a-select v-model:value="operationForm.route" allow-clear :placeholder="$t('common_pleaseSelect')">
              <a-select-option v-for="item in routeList"
              :key="item.value" :value="item.value">
              {{item.value}}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-form>
			</a-col>
		</a-row>
    <div class="page-wrap-table" style="height: 100%">
      <t-table align="center" :loading="searchBtnLoading" max-height="100%" :data="list.operationList">
      <t-column type="checkBox" width="50" @check-change="handleCheckChange"></t-column>
			<t-column min-width="100" field="operation" :title="$t('T9_operation')" />
			<t-column min-width="100" field="desc" :title="$t('T9_desc')" />
			<t-column min-width="100" field="detailOperationType" :title="$t('T9_detailOperationType')" />
		</t-table>
    </div>
          </div>
           <div style="width: 100%; height: 50%">
            <a-row
			type="flex"
			justify="space-between"
			align="middle"
			class="global-oper-row mt-1"
		>
			<a-col :span="14" class="global-oper-row-title">{{
				$t('T9_cfOperationList')
			}}</a-col>
      <a-col :span="4">Route</a-col>
			<a-col :span="6">
            <a-select v-model:value="cfOperationForm.route" allow-clear :placeholder="$t('common_pleaseSelect')">
              <a-select-option v-for="item in routeList"
              :key="item.value" :value="item.value">
              {{item.value}}
              </a-select-option>
            </a-select>
			</a-col>
		</a-row>
    <div class="page-wrap-table" style="height: 100%">
      <t-table align="center" :loading="searchBtnLoading" max-height="100%" :data="list.cfOperationList">
      <t-column type="checkBox" width="50" @check-change="handleCheckChange"></t-column>
			<t-column field="operation" :title="$t('T9_operation')" />
			<t-column field="desc" :title="$t('T9_desc')" />
			<t-column field="detailOperationType" :title="$t('T9_detailOperationType')" />
		</t-table>
    </div>
          </div>
        </div>
        <div style="width: 15%; height: 100%">
          <a-form
         ref="form"
          :colon="false"
          :model="form"
          :rules="rules5"
         >
          <a-form-item :label="$t('T9_shopId')" name="shopId" prop="shopId">
            <div style="width: 100%"></div>
            <a-select class="t9-form-wideget-input-default" v-model:value="form.shopId" allow-clear :placeholder="$t('common_pleaseSelect')">
              <a-select-option v-for="item in options.shopIdList"
              :key="item.value" :value="item.value">
              {{item.value}}
              </a-select-option>
            </a-select>
          </a-form-item>
           <a-form-item  :label="$t('T9_holdCode')" name="holdCode" prop="holdCode">
            <a-select class="t9-form-wideget-input-default" v-model:value="form.holdCode" allow-clear :placeholder="$t('common_pleaseSelect')">
              <a-select-option v-for="item in options.holdCodeList"
              :key="item.value" :value="item.value">
              {{item.value}}
              </a-select-option>
            </a-select>
             <a-select class="t9-form-wideget-input-default" v-model:value="form.holdCode" allow-clear :placeholder="$t('common_pleaseSelect')">
              <a-select-option v-for="item in options.holdCodeList"
              :key="item.value" :value="item.value">
              {{item.value}}
              </a-select-option>
            </a-select>
          </a-form-item>
          <a-input class="t9-form-wideget-input-default" disabled />
          <a-form-item  :label="$t('T9_actionType')" name="actionType" prop="actionType">
            <a-select class="t9-form-wideget-input-default" v-model:value="form.actionType" allow-clear :placeholder="$t('common_pleaseSelect')">
              <a-select-option v-for="item in options.actionTypeList"
              :key="item.value" :value="item.value">
              {{item.value}}
              </a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item  :label="$t('T9_releaseDepartment')" name="releaseDepartment" prop="releaseDepartment">
            <a-select class="t9-form-wideget-input-default" v-model:value="form.releaseDepartment" allow-clear :placeholder="$t('common_pleaseSelect')">
              <a-select-option v-for="item in options.releaseDepartmentList"
              :key="item.value" :value="item.value">
              {{item.value}}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-form>
        <a-button
        class="t9-form-wideget-btn-default"
				type="primary"
				@click="handleAdd"
				>{{ $t('T9_add') }}</a-button>
         <a-button
         class="t9-form-wideget-btn-default"
				@click="handleRemove"
				>{{ $t('T9_remove') }}</a-button>
        </div>
        <div style="width: 34%">
          <a-row
			type="flex"
			justify="space-between"
			align="middle"
			class="global-oper-row mt-1"
		>
			<a-col :span="8" class="global-oper-row-title">{{
				$t('T9_glassHoldList')
			}}</a-col>
			<a-col :span="15" class="global-oper-row-extra">
				<a-button class="t9-form-wideget-btn-default" type="primary">{{ $t('T9_toExcel') }}</a-button>
			</a-col>
		</a-row>
    <div class="page-wrap-table"  style="height: 100%">
		<t-table align="center" :loading="searchBtnLoading" max-height="100%" :data="list.glassHoldList">
      <t-column type="checkBox" width="50" @check-change="handleCheckChange"></t-column>
			<t-column min-width="100" field="slot" :title="$t('T9_slot')" />
			<t-column min-width="100" field="glassId" :title="$t('T9_glassId')" />
			<t-column min-width="100" field="actionType" :title="$t('T9_actionType')" />
			<t-column min-width="100" field="route" :title="$t('T9_route')" />
			<t-column min-width="100" field="operation" :title="$t('T9_operation')" />
			<t-column min-width="100" field="holdCode" :title="$t('T9_holdCode')" />
			<t-column min-width="100" field="holdDescription" :title="$t('T9_holdDescription')" />
			<t-column min-width="100" field="releaseDepartment" :title="$t('T9_releaseDepartment')" />
		</t-table>
    </div>
        </div>
      </div>
       <div class='data-form page-wrap-bottom mt-1'>
        <a-form
          ref="dataForm"
          layout="inline"
          :colon="false"
          :model="dataForm"
          :rules="rules2"
        >
          <a-form-item :label="$t('T9_comment')" name="eventComment" style="width:100%">
            <a-row type="flex" justify="space-between" align="middle">
              <a-col :span="21">
                <a-textarea allow-clear v-model:value="dataForm.eventComment" :rows="1" :title="dataForm.eventComment" />
              </a-col>
              <a-col :span="2">
                <a-button class="t9-form-wideget-btn-default" type="primary"  :loading="confirmBtnLoading" @click="handleConfirm">{{ $t('T9_confirm') }}</a-button>
              </a-col>
            </a-row>
          </a-form-item>
        </a-form>
      </div>
    <ModalPasswordConfirm v-model:value="visible" @ok="handleOk"/>
	</div>
</template>

<script>
  import { defineComponent } from 'vue'
  import initOptionsMixin from '@/mixins/initOptionsMixin'
  import { shopIdList } from '@/views/options'
  import * as api from '@/api/common'
   import ModalPasswordConfirm from '@/components/ModalPasswordConfirm.vue'

  export default defineComponent({
    name: 'TabFutureHold',
    components: { ModalPasswordConfirm },
    mixins: [initOptionsMixin],
    data() {
      return {
        searchBtnLoading: false,
        selectByAbs: false,
        form: {
          shopId: 'ARRAY',
          holdCode: undefined,
          actionType: undefined,
          releaseDepartment: undefined
        },
        operationForm: {
          route: undefined
        },
        cfOperationForm: {
          route: undefined
        },
        queryForm: {
          shopId: 'ARRAY',
          cstId: undefined
        },
        dataForm: {
          eventComment: ''
        },
        options: {
          shopIdList
        },
        list: {
          glassHoldList: [],
          cfOperationList: [],
          operationList: [],
          glassList: [],
          tableData: [],
          basicParams: {
            queryId: 'GetProductList',
            version: '81043',
            dtoName: 'BoxDTO',
            menuName: 'viewBoxPalletInformation',
            usage: 'getBoxInformation',
            materialType: 'Product',
            site: ''
          }
        },
        rules: {
          shopId: [
            {
              required: true,
              message: this.$t('valid_required2'),
              trigger: 'change'
            }
          ],
          cstId: [
            {
              required: true,
              message: this.$t('valid_required'),
              trigger: 'blur'
            }
          ]
        },
        rules2: {
          eventComment: [
            {
              required: true,
              message: this.$t('valid_required2'),
              trigger: 'blur'
            }
          ]
        },
        rules3: {
          route: [
            {
              required: true,
              message: this.$t('valid_required2'),
              trigger: 'change'
            }
          ]
        },
        rules4: {
          route: [
            {
              required: true,
              message: this.$t('valid_required2'),
              trigger: 'change'
            }
          ]
        },
        rules5: {
          shopId: [
            {
              required: true,
              message: this.$t('valid_required2'),
              trigger: 'change'
            }
          ],
          holdCode: [
            {
              required: true,
              message: this.$t('valid_required2'),
              trigger: 'change'
            }
          ],
          actionType: [
            {
              required: true,
              message: this.$t('valid_required2'),
              trigger: 'change'
            }
          ],
          releaseDepartment: [
            {
              required: true,
              message: this.$t('valid_required2'),
              trigger: 'change'
            }
          ]
        }
      }
    },
    computed: {},
    mounted() {

    },
    watch: {

    },
    methods: {
      handleSearch() {
        this.$refs.queryForm
          .validate()
          .then(() => {
            if (this.searchBtnLoading) return
            this.searchBtnLoading = true
            const params = { ...this.queryForm, ...this.list.basicParams }
            api
              .getList(params)
              .then((res) => {
                this.list.tableData = res.boxListDTOList || []
                Object.assign(this.info, res.boxListInformationDTO)
                this.searchBtnLoading = false
              })
              .catch((error) => {
                this.searchBtnLoading = false
                console.error(error)
              })
          })
          .catch((error) => {
            console.log('error', error)
          })
      }
    }
  })
</script>
<style lang='less' scoped>
.t9-form-wideget-input-default {
  width: 150px;
}
</style>
